<template>
  <div class="recharge-container">
    <el-card class="recharge-card">
      <template #header>
        <h2>虚拟币充值</h2>
      </template>

      <div class="package-list">
        <el-card
          v-for="pkg in packages"
          :key="pkg.id"
          class="package-card"
          :class="{ 'first-recharge': isFirstRecharge }"
          shadow="hover"
          @click="selectPackage(pkg)"
        >
          <div class="package-content">
            <h3>{{ pkg.name }}</h3>
            <p class="price">¥{{ pkg.amount }}</p>
            <p class="coins">{{ pkg.coins }} 虚拟币</p>
            <p v-if="isFirstRecharge" class="bonus">
              +{{ calculateBonus(pkg.coins) }} 首充赠送
            </p>
          </div>
        </el-card>
      </div>

      <div class="payment-methods">
        <h3>选择支付方式</h3>
        <el-radio-group v-model="paymentMethod">
          <el-radio value="alipay">
            <el-icon><Alipay /></el-icon>
            支付宝
          </el-radio>
          <el-radio value="wechat">
            <el-icon><Wechat /></el-icon>
            微信支付
          </el-radio>
        </el-radio-group>
      </div>

      <div class="actions">
        <el-button
          type="primary"
          size="large"
          :disabled="!selectedPackage"
          @click="createOrder"
        >
          立即充值
        </el-button>
      </div>
    </el-card>

    <!-- 支付弹窗 -->
    <el-dialog
      v-model="showPaymentDialog"
      :title="`充值${selectedPackage?.name}`"
      width="30%"
    >
      <div v-if="paymentData.qrcode" class="qrcode-payment">
        <img :src="paymentData.qrcode" alt="支付二维码" class="qrcode-image">
        <p>请使用{{ paymentMethod === 'alipay' ? '支付宝' : '微信' }}扫码支付</p>
      </div>
      <div v-else class="redirect-payment">
        <el-button type="primary" @click="redirectToPayment">
          跳转到支付页面
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Alipay, Wechat } from '@element-plus/icons-vue'
import { createPaymentOrder } from '@/api/payment'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const packages = ref([])
const selectedPackage = ref(null)
const paymentMethod = ref('alipay')
const showPaymentDialog = ref(false)
const paymentData = ref({})
const isFirstRecharge = ref(false)

// 获取充值套餐
const loadPackages = async () => {
  try {
    // TODO: 调用API获取套餐
    const res = await getVirtualCoinPackages()
    packages.value = res.data
    isFirstRecharge.value = res.isFirstRecharge
  } catch (error) {
    console.error('获取充值套餐失败:', error)
  }
}

// 计算首充赠送
const calculateBonus = (coins) => {
  const bonusRate = 0.2 // 从配置获取
  const maxBonus = 50
  return Math.min(Math.floor(coins * bonusRate), maxBonus)
}

// 选择套餐
const selectPackage = (pkg) => {
  selectedPackage.value = pkg
}

// 创建订单
const createOrder = async () => {
  try {
    const res = await createPaymentOrder({
      packageId: selectedPackage.value.id,
      method: paymentMethod.value
    })
    
    paymentData.value = res.data
    showPaymentDialog.value = true
  } catch (error) {
    console.error('创建支付订单失败:', error)
  }
}

// 跳转支付
const redirectToPayment = () => {
  window.location.href = paymentData.value.paymentUrl
}

onMounted(() => {
  loadPackages()
})
</script>

<style scoped>
.recharge-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.package-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.package-card {
  cursor: pointer;
  transition: all 0.3s;
}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.package-card.first-recharge {
  border: 2px solid var(--el-color-primary);
}

.package-content {
  text-align: center;
  padding: 15px;
}

.package-content h3 {
  margin: 0 0 10px;
  color: var(--el-text-color-primary);
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary);
  margin: 10px 0;
}

.coins {
  color: var(--el-text-color-regular);
  margin: 5px 0;
}

.bonus {
  color: var(--el-color-success);
  font-size: 12px;
  margin: 5px 0 0;
}

.payment-methods {
  margin-bottom: 30px;
}

.payment-methods h3 {
  margin-bottom: 15px;
}

.actions {
  text-align: center;
}

.qrcode-payment {
  text-align: center;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  display: block;
}

.redirect-payment {
  text-align: center;
  padding: 20px 0;
}
</style>